<template>
    <div>
        <!--卡片-->
        <el-card class="box-card">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/homePage' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>修改密码</el-breadcrumb-item>
            </el-breadcrumb>
            <el-divider></el-divider>

            <div style="width: 500px">
                <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                    <el-form-item label="修改密码" prop="userpwd">
                        <el-input v-model="form.userpwd" type="password"></el-input>
                    </el-form-item>
                    <el-form-item label="重复密码" prop="againpwd">
                        <el-input v-model="form.againpwd" type="password"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="updatePwd('form')">立即修改</el-button>
                        <el-button>取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
    </div>

</template>

<script>
    export default {
        data() {
            return {
               form : {
                    userpwd: '',
                    againpwd: ''
               },
               rules: {
                    userpwd: [
                        { required: true, message: '请输入密码', trigger: 'blur' }
                    ],
                    againpwd: [
                        { required: true, message: '请输入重复密码', trigger: 'blur' }
                    ]
               }
            }
        },
        methods: {
            updatePwd(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (this.form.userpwd == this.form.againpwd) {
                            this.$axios({
                                method: 'get',
                                url: 'clms-system/user/updatePwd',
                                params: {
                                    userpwd : this.form.userpwd
                                }
                            }).then( result => {
                                if (result.data.code == 200) {
                                    this.$message.success("修改成功，请重新登录");
                                    this.$router.push("/")
                                } else {
                                    this.$message.error(result.data.message);
                                }
                            })
                        } else {
                            this.$message.error("两次密码输入不一致");
                        }
                    } else {
                        this.$message.error("请输入密码");
                    }
                });
            }
        }
    }
</script>